<template>
    <div class="w750" :class="[fightMoreArr && fightMoreArr.length != 0 ? '' : 'white-bg', themes.theme]">
        <div class="detail">
            <div class="fighting">
                <div class="fighting-tit">
                    <div class="fl">进行中的团购</div>
                </div>
                <div class="fighting-item" v-for="(item, index) in fightMoreArr" :key="index">
                    <div class="item-con">
                        <div class="person">
                            <span class="per-img">
                                <img
                                    :src="item.portraitPic ? $imgUrlHead + item.portraitPic : require('../../assets/images/head-default.png')"
                                    alt=""
                                />
                            </span>
                            现有{{ item.propleCount }}人数, 已参团
                        </div>
                        <count-down :time="item.endTime" :custom="true" style="display: inline" @finish="endcallback">
                            <template v-slot="times">
                                <div class="rest-time">
                                    剩
                                    <span class="time" :style="{ color: themes.color }">
                                        <template v-if="times.times.days">{{ times.times.days }}:</template>
                                        {{ times.times.hours }}:{{ times.times.minutes }}:{{ times.times.seconds }}
                                    </span>
                                    结束
                                </div>
                            </template>
                        </count-down>
                    </div>
                    <span v-if="!item.own" class="item-btn" @click="fightSuccess(item.addNumber)">立即参加</span>
                    <span v-else class="item-btn" @click="share(item)">邀请好友</span>
                </div>
            </div>
        </div>
        <Noempty :pic="require('../../assets/images/order-empty.png')" :title="'暂无正在进行的团列表'" v-if="Nomsg" />
        <share-sheet
            ref="shareSheet"
            :prames="shareConfig"
            :share-type="[{ type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') }]"
        ></share-sheet>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import countDown from 'components/countdown/count-down'
import { mapState } from 'vuex'
import { fightaddUserLists } from 'api/fight'
import fightSkuMixin from 'mixin/fightSkuMixin.js'
import shareSheet from 'components/share/shareSheet'

export default {
    components: {
        Noempty,
        countDown,
        shareSheet
    },
    mixins: [fightSkuMixin],
    data() {
        return {
            Nomsg: false,
            fightMoreArr: [],
            timer: 0
        }
    },
    computed: {
        ...mapState(['themes'])
    },

    mounted() {
        //获取活动列表
        let mergeGroupId = this.$route.query.mergeGroupId
        this.loadfightaddUserLists(mergeGroupId)
    },
    methods: {
        loadfightaddUserLists(mergeGroupId) {
            fightaddUserLists({ mergeGroupId: mergeGroupId }).then((res) => {
                if (res.status == 1) {
                    if (res.result.length > 0) {
                        this.fightMoreArr = res.result
                        // this.countdowm(this.fightMoreArr)
                    } else {
                        this.Nomsg = true
                    }
                } else {
                }
            })
        },
        endcallback() {
            this.loadfightaddUserLists(this.$route.query.mergeGroupId)
        },
        //跳参团
        fightSuccess(event) {
            let addNumber = event
            this.$router.push({
                path: `/fightgroupDetail`,
                query: {
                    sn: addNumber,
                    source: 'GROUP'
                }
            })
        },

        // 分享
        share(groupItem) {
            this.$refs.shareSheet.sheetShow = true
            this.shareConfig.shareText = `todo`
        }
    }
}
</script>

<style scoped>
@import '../../assets/css/style/fight-style.css';
@import '../../assets/css/style/detail-style.css';
@import '../../assets/css/detail.css';
@import '../../assets/css/popup.css';
@import '../../assets/css/get-coupons.css';
@import '../../assets/css/comment-list.css';
@import '../../assets/css/fight.css';
</style>
